{% extends "H5GameBundle::base.html.twig" %}

{% block inlineStyles %}
    <style type="text/css">
        .gftjpic_ul01{width: 100%!important;margin-left:2%!important;}
        .gftjpic_ul01 a {width: 91%!important;}
    </style>
{% endblock %}

{% block pageContent %}
    <div class="toptiaodiv pr"><img src="/assets/h5game/images/topdi.jpg" width="100%" />
        <a href="http://h5.49you.com" class="logo_49sy db pa"><img src="/assets/h5game/images/logo.png" /></a>
        <a href="search.html" class="userc_a db pa"><img src="/assets/h5game/images/sbtn.png" /></a>
    </div>
    <!--banner start-->
    <div class="bannar">
        <div id="slider" class="swipe">
            <div class="swipe-wrap">
                <span><a href="http://zhuanti.49you.com/h5libao/?id=90"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/55a725aa0f650.jpg" /></a></span>
                <span><a href="http://zhuanti.49you.com/h5libao/?id=93"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/55a07682dac1e.jpg" /></a></span>
                <span><a href="http://gameh5.49you.com/mzj/info.html"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/55a07532c2d1e.jpg" /></a></span>
                <span><a href="http://zhuanti.49you.com/h5libao/?id=92"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/55a7270ef0c35.jpg" /></a></span>        </div>
            <div class="swipe-bar"><span class="current"></span><span></span><span></span><span style="margin-right:0"></span></div>
        </div>
    </div>
    <!--banner end-->
    <div class="gftjwrap_div00" id="cnxhdiv">
        <div class="gftjhead_p pr" style="border-bottom:none;">猜你喜欢 <a href="javascript:;" class="hyh_a db pa" id="hyh">换一换</a></div>
        <div id="cnxh_ul2">
        </div>
    </div>
    <div class="gftjwrap_div00">
        <div class="gftjhead_p pr" style="border-bottom:none;">官方推荐 <a href="tuijian.html" class="tjmore_a db pa">更多</a></div>
        <ul class="gftjpic_ul01">
            <li>
                <a href="http://gameh5.49you.com/dmyx/info.html"><img src="/assets/h5game/images/86_86.jpg" /><span class="tmspan dn pa"></span><span class="wordspan dn pa">网游游戏</span></a>
                <p>盗墓英雄</p>
            </li><li>
                <a href="http://gameh5.49you.com/qmgd/info.html"><img src="/assets/h5game/images/86_86.jpg" /><span class="tmspan dn pa"></span><span class="wordspan dn pa">网游游戏</span></a>
                <p>全民宫斗</p>
            </li><li>
                <a href="http://gameh5.49you.com/qmgz/info.html"><img src="/assets/h5game/images/86_86.jpg" /><span class="tmspan dn pa"></span><span class="wordspan dn pa">网游游戏</span></a>
                <p>全民国战</p>
            </li><li>
                <a href="http://gameh5.49you.com/mzj/info.html"><img src="/assets/h5game/images/86_86.jpg" /><span class="tmspan dn pa"></span><span class="wordspan dn pa">网游游戏</span></a>
                <p>萌战姬</p>
            </li>        </ul>
    </div>
    <div class="gftjwrap_div0">
        <!--banner2 start-->
        <div class="bannar2">
            <div id="slider2" class="swipe" style="padding-bottom:0px;">
                <div class="swipe-wrap" id="sw2">
                    <span><a href="http://h5.49you.com/paihang.html?type=2"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/17.jpg" /></a><a href="http://h5.49you.com/paihang.html?type=1" style="margin-right:0;"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/18.jpg" /></a></span>
                    <span><a href="http://h5.49you.com/paihang.html?id=1"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/19.jpg" /></a><a href="http://h5.49you.com/swhz.html" style="margin-right:0;"><img class="lazyimg" src="about:blank" data-original="/assets/h5game/images/20.jpg" /></a></span>
                </div>
                <div class="swipe-bar2 dn"><span class="current"></span><span style="margin-right:0"></span></div>
            </div>
        </div>
        <!--banner2 end-->
    </div>

    <style type="text/css">
        a.libao_a{ display:inline-block; width:40px; height:18px; line-height:18px; border:1px solid #70abfa; background-color:#edf6f9; color:#70abfa; font-size:12px; border-radius:5px; text-align:center; margin-left:10px; vertical-align:middle}
    </style>
    <div class="gftjwrap_div">
        <div class="gftjhead_p pr">精品游戏 <a href="jingpinyx.html" class="tjmore_a db pa">更多</a></div>
        <ul class="gftj_ul">
            <li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/mzj/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">萌战姬                                        <a href="http://zhuanti.49you.com/h5libao?id=94" class="libao_a">礼包</a>                    </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star5.png" /> &nbsp;人气：617421</p>
                    <p class="gftjyxinfo_p2">《萌战姬》是由重...</p>
                </div>
                <a href="http://gameh5.49you.com/mzj/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/glqxz/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">古龙群侠传                                        <a href="http://zhuanti.49you.com/h5libao?id=92" class="libao_a">礼包</a>                    </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star5.png" /> &nbsp;人气：607214</p>
                    <p class="gftjyxinfo_p2">《古龙群侠传》游...</p>
                </div>
                <a href="http://gameh5.49you.com/glqxz/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/dmyx/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">盗墓英雄                                        <a href="http://zhuanti.49you.com/h5libao?id=93" class="libao_a">礼包</a>                    </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star5.png" /> &nbsp;人气：605241</p>
                    <p class="gftjyxinfo_p2">经典像素风格的MM...</p>
                </div>
                <a href="http://gameh5.49you.com/dmyx/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/mezj/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">摩尔战记                                        <a href="http://zhuanti.49you.com/h5libao?id=91" class="libao_a">礼包</a>                    </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star5.png" /> &nbsp;人气：604214</p>
                    <p class="gftjyxinfo_p2">《摩尔战记》是一...</p>
                </div>
                <a href="http://gameh5.49you.com/mezj/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/qmgd/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">全民宫斗                                        <a href="http://zhuanti.49you.com/h5libao?id=90" class="libao_a">礼包</a>                    </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star5.png" /> &nbsp;人气：604214</p>
                    <p class="gftjyxinfo_p2">《全民宫斗》在游...</p>
                </div>
                <a href="http://gameh5.49you.com/qmgd/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/qmgz/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">全民国战                                        <a href="http://zhuanti.49you.com/h5libao?id=51" class="libao_a">礼包</a>                    </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star5.png" /> &nbsp;人气：584284</p>
                    <p class="gftjyxinfo_p2">《全民国战》是智...</p>
                </div>
                <a href="http://gameh5.49you.com/qmgz/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/xmxx/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">消灭星星                                                            </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star4.png" /> &nbsp;人气：465214</p>
                    <p class="gftjyxinfo_p2">消除星星，达到目...</p>
                </div>
                <a href="http://gameh5.49you.com/xmxx/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/wqdds/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">温泉蛋大叔                                                            </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star4.png" /> &nbsp;人气：458216</p>
                    <p class="gftjyxinfo_p2">一款恶搞风格的游...</p>
                </div>
                <a href="http://gameh5.49you.com/wqdds/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/pj/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">扑街                                                            </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star4.png" /> &nbsp;人气：452132</p>
                    <p class="gftjyxinfo_p2">神经病院又逃出了...</p>
                </div>
                <a href="http://gameh5.49you.com/pj/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li><li>
                <div class="gftjicon fl pr"><a href="http://gameh5.49you.com/dxst/info.html"><img src="/assets/h5game/images/86_86.jpg" /></a></div>
                <div class="gftjyxinfo_div fl">
                    <p class="gftjyxname">读心小博士                                                            </p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star3.png" /> &nbsp;人气：385421</p>
                    <p class="gftjyxinfo_p2">太神奇了，它能猜...</p>
                </div>
                <a href="http://gameh5.49you.com/dxst/info.html" class="tjstart_a db fr"><img src="/assets/h5game/images/startbg01.png" /></a>
            </li>        </ul>
        <a href="jingpinyx.html" class="dlhz_a db" style="margin-bottom:4%;"><img src="/assets/h5game/images/gdjpbtn.png" /></a>
    </div>
{% endblock %}

{% block inlineScripts %}

<script type="text/javascript">
    $(function() {
        var items = Array.prototype.slice.call(document.querySelectorAll('.swipe-bar span'));
        var s = new Swipe(document.getElementById('slider'), {
            startSlide: 0,
            speed: 400,
            auto: 3000,
            continuous: true,
            disableScroll: false,
            stopPropagation: false,
            callback: function(index, elem) {
                items.forEach(function(e, i) {
                    e.className = (index % 4) == i ? 'current' : '';
                });
            },
            transitionEnd: function(index, elem) {}
        });
        var imgElems = Array.prototype.slice.call(document.querySelectorAll(".lazyimg")), url;
        imgElems.forEach(function(e, i) {
            url = e.getAttribute("data-original");
            if (url) e.src = url;
        });

//第二个幻灯片
        var items2 = Array.prototype.slice.call(document.querySelectorAll('.swipe-bar2 span'));
        var s = new Swipe(document.getElementById('slider2'), {
            startSlide: 0,
            speed: 500,
            auto: 3500,
            continuous: true,
            disableScroll: false,
            stopPropagation: false,
            callback: function(index, elem) {
                items2.forEach(function(e, i) {
                    e.className = (index % 2) == i ? 'current' : '';
                });
            },
            transitionEnd: function(index, elem) {}
        });
        var imgElems2 = Array.prototype.slice.call(document.querySelectorAll(".lazyimg")), url;
        imgElems2.forEach(function(e, i) {
            url = e.getAttribute("data-original");
            if (url) e.src = url;
        });

//第三个幻灯片
        var items3 = Array.prototype.slice.call(document.querySelectorAll('.swipe-bar3 span'));
        var s = new Swipe(document.getElementById('slider3'), {
            startSlide: 0,
            speed: 500,
            auto: 4500,
            continuous: true,
            disableScroll: false,
            stopPropagation: false,
            callback: function(index, elem) {
                items2.forEach(function(e, i) {
                    e.className = (index % 2) == i ? 'current' : '';
                });
            },
            transitionEnd: function(index, elem) {}
        });
        var imgElems2 = Array.prototype.slice.call(document.querySelectorAll(".lazyimg")), url;
        imgElems2.forEach(function(e, i) {
            url = e.getAttribute("data-original");
            if (url) e.src = url;
        });

    });

    $(document).ready(function(){

        $('.gftj_ul li').hover(function(){
            $(this).css('background-color','#f0f2f3');
            $(this).siblings().css('background-color','#fff');
            $(this).find('.tjstart_a img').attr('src','/assets/h5game/images/startbg02.png');
            $(this).siblings().find('.tjstart_a img').attr('src','/assets/h5game/images/startbg01.png');
        });

        //判断滚动条距离上面的高度是否为0来判断是否显示返回头部模块
        $(window).scroll(function(){
            var top=$(window).scrollTop();
            if(top>0){
                $("#pub-littlt-fix-nav").fadeIn("slow");
            }else{
                $("#pub-littlt-fix-nav").fadeOut("slow");
            }
        });
        $('.totopbtn_a').click(function(){
            //$('html, body, .content').animate({scrollTop: $(document).height()}, 300);
            $('html, body, .content').animate({scrollTop: 0}, 300);
        });

    });

    //换一换功能
    var i=0;
    document.getElementById('hyh').onclick=function()
    {
        var a = document.getElementById('cnxhdiv').getElementsByTagName('ul'),
                l = a.length;

        a[i++].style.display = 'none';
        if(i >= l)i = 0;
        a[i].style.display = 'block';
    }

    var api = "http://api.49you.com";
    $(function()
    {
        var item = $.cookie("item");//获取item的值
        $.ajax(
                {
                    type : "get",
                    async:false,
                    url : api + "/api/Html5/getGames",
                    data : {'item':item},
                    dataType : "jsonp",
                    jsonp: "jsoncallback",//服务端用于接收callback调用的function名的参数
                    success : function(data)
                    {
                        var str = '';
                        var i = 0;
                        $.each(data,function(i,t)
                        {
                            if(i % 4 == 0)
                            {
                                if(i==0)
                                    str += '<ul class="gftjpic_ul01">';
                                else
                                    str += '<ul class="gftjpic_ul01 dn">';
                            }
                            str += '<li><a href="http://gameh5.49you.com/'+t.game_code+'/info.html"><img src="/assets/h5game/images/86_86.jpg" /><span class="tmspan dn pa">'+t.name+'</span><span class="wordspan dn pa">'+t.name+'</span></a><p>'+t.game_name+'</p></li>';
                            if((i + 1) % 4 == 0)
                                str += '</ul>';
                            i++;
                        });
                        $('#cnxh_ul2').html(str);
                    },
                    error:function()
                    {

                    }
                });
    });
    </script>

    {% endblock %}